<template>
  <div class="page-edit">
    <header>
      <i
        style="font-size: 18px; cursor: pointer; margin-right: 8px"
        class="el-icon-arrow-left"
        @click="goBack"
      ></i>
      <span>{{ titleProps }}</span>
    </header>

    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <el-col :span="12">
        <el-form-item label="值班人员" prop="userId">
          <deptAndDuty
            type-show="duty"
            @deptDateChange="dutyChange1"
            :dutyId="form.userId"
            :disabled="!isEdit"
          ></deptAndDuty>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="值班开始日期" prop="startTime">
          <el-date-picker
            clearable
            :readonly="!isEdit"
            :disabled="!isEdit"
            v-model="form.startTime"
            type="date"
            value-format="yyyy-MM-dd "
            placeholder="选择值班开始日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="值班截止日期" prop="endTime">
          <el-date-picker
            clearable
            :readonly="!isEdit"
            :disabled="!isEdit"
            v-model="form.endTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择值班截止日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="交班人员" prop="toUserId">
          <deptAndDuty
            type-show="duty"
            @deptDateChange="dutyChange"
            :dutyId="form.toUserId"
            :disabled="!isEdit"
          ></deptAndDuty>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="交班人员联系方式" prop="toUserPhone">
          <el-input
            v-model="form.toUserPhone"
            placeholder="请输入交班人员联系方式"
            :readonly="!isEdit"
            :disabled="!isEdit"
          />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="车间" prop="workshop">
          <el-select
            filterable
            v-model="form.workshop"
            placeholder="请选择车间"
            clearable
            :readonly="!isEdit"
            :disabled="!isEdit"
          >
            <el-option
              v-for="(dict, index) in listShop"
              :key="index"
              :label="dict.name"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="岗位记事" prop="logs">
          <div class="content">
            <div class="ct-table">
              <elTables
                :currentPage="queryParams.pageNum"
                :table-data="form.logs"
                :columns="logColumns"
                :handle-current-change="handleCurrentChange"
                :isPagin="false"
                :curHeight="tableHeight"
              />
            </div>
            <div class="ct-btns">
              <el-button
                type=""
                @click="addLog"
                :readonly="!isEdit"
                :disabled="!isEdit"
                v-hasPermi="['base:dutylog:add']"
                >添加日志</el-button
              >
            </div>
          </div>
        </el-form-item>
      </el-col>
    </el-form>
    <div slot="footer" class="dialog-footer" v-if="isEdit">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </div>
    <!-- 添加日志弹出框 -->
    <el-dialog
      :title="title"
      :visible.sync="openLog"
      append-to-body
      class="dialog-form"
    >
      <el-form
        ref="formLog"
        :model="formLog"
        :rules="rulesLog"
        label-width="140px"
      >
        <el-col :span="24">
          <el-form-item label="日志内容" prop="content">
            <el-input
              type="textarea"
              v-model="formLog.content"
              placeholder="请输入日志内容"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="记录时间" prop="date">
            <el-date-picker
              clearable
              v-model="formLog.date"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择记录时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="cancelLog">取消</el-button>
        <el-button type="primary" @click="submitLog">确定</el-button>
      </div>
    </el-dialog>

    <!-- <footer>
      <el-button>取消</el-button>
      <el-button type="primary">确定</el-button>
    </footer> -->
  </div>
</template>
<script>
const defaultQueryParams = {
  pageNum: 1,
  pageSize: 10,
};
import {
  pageDutylog,
  listDutylog,
  getDutylog,
  delDutylog,
  addDutylog,
  updateDutylog,
} from "@/api/safetyManagement/safetyPerson/logManage";
import { listShop } from "@/api/video/monitor";
export default {
  props:{
    titleProps:{
      type:String,
      default:'新增'
    },
    isEditProps:{
      type:Boolean
    }
  },
  watch: {
    isEditProps: {
      handler(newVal) {
        debugger
        this.isEdit = newVal
      },
    },
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        ...defaultQueryParams,
      },
      openLog: false,
      tableHeight: 0,
      isEdit: this.isEditProps,
      form: {logs: [],userId:''},
      // 表单校验
      rules: {
        userId: [
          { required: true, message: "值班人员不能为空", trigger: "blur" },
        ],
        userName: [
          { required: true, message: "值班人员不能为空", trigger: "blur" },
        ],
        startTime: [
          { required: true, message: "值班开始日期不能为空", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "值班截止日期不能为空", trigger: "blur" },
        ],
        toUserPhone: [
          {
            required: true,
            message: "交班人员联系方式不能为空",
            trigger: "blur",
          },
        ],
        log: [
          {
            required: true,
            message: "岗位记事不能为空",
            trigger: "blur",
          },
        ],
      },
      title:'新增',
      logColumns: [
        { key: "content", title: "日志内容" },
        { key: "date", title: "记录时间" },
        {
          title: "操作",
          align: "center",
          fixed: "right",
          width: 200,
          render: (h, params) => {
            return h("div", [
              h(
                "el-button",
                {
                  props: {
                    type: "text",
                    size: "small",
                    disabled:!this.isEdit
                  },
                  directives: [
                    {
                      name: "hasPermi",
                      value: ["base:dutylog:edit"],
                    },
                  ],
                  on: {
                    click: () => {
                      this.handleUpdate(params.row, 1,params.index);
                    },
                  },
                },
                "编辑"
              ),
              // h(
              //   "el-button",
              //   {
              //     props: {
              //       type: "text",
              //       size: "small",
              //     },
              //     directives: [
              //       {
              //         name: "hasPermi",
              //         value: ["base:dutylog:info"],
              //       },
              //     ],
              //     on: {
              //       click: () => {
              //         this.handleUpdate(params.row, 2);
              //       },
              //     },
              //   },
              //   "查看"
              // ),
              h(
                "el-button",
                {
                  props: {
                    type: "text",
                    size: "small",
                    disabled:!this.isEdit
                  },
                  directives: [
                    {
                      name: "hasPermi",
                      value: ["base:dutylog:remove"],
                    },
                  ],
                  on: {
                    click: () => {
                      this.handleDelete(params.index);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],
      formLog: {},
      rulesLog: {
        content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        date: [{ required: true, message: "日期不能为空", trigger: "change" }],
      },
      formList: [
        {
          label: "塔基名称",
          prop: "name",
          span: 8,
          type: "input",
        },
        {
          label: "位置",
          prop: "position",
          span: 8,
          type: "input",
        },
        {
          label: "塔基名称",
          prop: "name",
          span: 8,
          type: "input",
        },
        {
          label: "位置",
          prop: "position",
          span: 8,
          type: "input",
        },
        {
          label: "塔基名称",
          prop: "name",
          span: 8,
          type: "input",
        },
        {
          label: "位置",
          prop: "position",
          span: 8,
          type: "input",
        },
        {
          label: "塔基名称",
          prop: "name",
          span: 8,
          type: "input",
        },
        {
          label: "位置",
          prop: "position",
          span: 8,
          type: "input",
        },
        {
          label: "行政区域",
          prop: "administrativeArea",
          span: 8,
          type: "select-tree",
        },
        {
          label: "路线",
          prop: "lineId",
          span: 8,
          type: "select",
          selList: [],
        },
        {
          label: "高度(m)",
          prop: "height",
          span: 8,
          type: "input",
        },
        {
          label: "占地面积(m²)",
          prop: "coverArea",
          span: 8,
          type: "input",
        },
        {
          label: "简介",
          prop: "introduce",
          span: 16,
          type: "textarea",
        },
        {},
        {
          label: "行政区域",
          prop: "administrativeArea",
          span: 8,
          type: "select-tree",
        },
        {
          label: "路线",
          prop: "lineId",
          span: 8,
          type: "select",
        },
        {
          label: "高度(m)",
          prop: "height",
          span: 8,
          type: "input",
        },
      ],
      infoOptions: [],
      options: [],
      listShop: [],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getTableHeight();
    });
    this.getlistShop();
  },
  methods: {
    handleDelete(index){
      this.form.logs.splice(index,1)
    },
    handleCurrentChange(){},
    cancelLog(){
      this.openLog = false;
    },
    //获取车间
    getlistShop() {
      listShop().then((res) => {
        this.listShop = res.data;
      });
    },

    // 组件传回的人员id
    dutyChange1(val) {
      if(val){
        this.form.userId = val.userId;
        this.form.userName = val.userName;
      }
    },
    // 组件传回的人员id
    dutyChange(val) {
      if(val){
        this.form.toUserId = val.userId;
        this.form.toUserName = val.userName;
      }
    },
    cancel() {
      this.$emit("close")
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = {}
          if(this.form.logs.length>0){
            let arr = this.form.logs.map(item=>{
              return {
                date:item.date,
                content:item.content
              }
            })
            params = {...this.form}
            params.logs = arr;
          }else{
            params = {...this.form}
          }
 
          if (this.form.id != null) {
            updateDutylog(params).then((response) => {
              this.msgSuccess("修改成功");
              this.cancel();
            });
          } else {
            addDutylog(params).then((response) => {
              this.msgSuccess("新增成功");
              this.cancel();
            });
          }
        }
      });
    },
    submitLog() {
      this.$refs["formLog"].validate((valid) => {
        if (valid) {
          if(this.formLog.id != null){
            this.$set(this.form.logs,this.formLog,this.formLog.id);
            this.cancelLog()
          }else{
            this.form.logs.push(this.formLog);
            this.cancelLog()
          }
        }
      });
    },
    // 添加日志
    addLog() {
      this.reset();
      this.openLog = true;
      this.$nextTick(()=>{
        this.$refs["formLog"].clearValidate()
      });
      this.title = "新增"
    },
    handleUpdate(row,type,index){
      this.openLog = true;
      if (type == 1) {
        this.title = "编辑"
      } else {
       
      }
      this.formLog = row
      this.formLog.id = index
    },
    reset(){
      this.formLog={
        id: null,
        content:'',
        date:''
      }
    },
    getTableHeight() {
      let height = document.body.clientHeight
      this.tableHeight =height-  600;
    },
    goBack() {
      // this.$router.go(-1)
      this.$emit("close");
    }
  },
};
</script>
<style scoped></style>
